<template>
	<div id="ZheXianTu04"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import { Line } from '@antv/g2plot'

const seriesKey = 'series'
const valueKey = 'value'
const processData = (data, yFields, meta) => {
	const result = []
	data.forEach((d) => {
		yFields.forEach((yField) => {
			const name = meta?.[yField]?.alias || yField
			result.push({ ...d, [seriesKey]: name, [valueKey]: d[yField] })
		})
	})
	return result
}

const data = [
	{ month: '2024-01', finish: 1038,notfinish:140 },
	{ month: '2024-02', finish: 1025,notfinish:130 },
	{ month: '2024-03', finish: 1030,notfinish:150 },
	{ month: '2024-04', finish: 1025,notfinish:150},
	{ month: '2024-05', finish: 1030 ,notfinish:160},
	{ month: '2024-06', finish: 1020 ,notfinish:120},
]

onMounted(() => {
			const meta = {
				month: {
					alias: '月份'
				},
				finish: {
					alias: '转运数'
				},
				notfinish: {
					alias: '存量数'
				}
			}
			const line = new Line('ZheXianTu04', {
				data: processData(data, ['finish', 'notfinish'], meta),
				padding: 'auto',
				xField: 'month',
				yField: valueKey,
				seriesField: seriesKey,
				appendPadding: [0, 8, 0, 0]
			})
			line.render()
		})
</script>

<style scoped></style>
